<template>
  <WidgetContainer :widget-id="config.id">
    <FormItemWidget :config="config" :rowIndex="rowIndex" :parentId="parentId">
      <el-input :class="config.attributes?.cssClass" v-model="fieldValue" :placeholder="config.attributes.placeholder" :disabled="config.attributes.disabled"
        :size="config.attributes.size" :style="{ width: config.attributes.width }" :type="config.attributes.inputType"
        :show-password="config.attributes.showPassword" @change="handleChange" />
    </FormItemWidget>
  </WidgetContainer>
</template>

<script setup>
import { ElInput } from 'element-plus';
import { inject, onMounted } from 'vue'
import { executeEventHandler } from '@/utils/eventExecutor'
import { useFieldBinding } from '@/utils/useFieldBinding'

const formData = inject('formData')
const widgetList = inject('widgetList')

const props = defineProps({
  config: Object,
  rowIndex: Number,
  parentId: String
})

const { fieldValue } = useFieldBinding(formData, props.config, {
  rowIndex: props.rowIndex,
  parentId: props.parentId
})


onMounted(() => {
  executeEventHandler(props.config.events?.onMounted,
    { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value }
  )
})

const handleChange = (value) => {
  executeEventHandler(props.config.events?.onChange,
    { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value, value }
  )
}
</script>

<style scoped>
.el-input {
  width: 100%;
}
</style>